import React, { useState, useRef, useEffect } from "react";
import "./style.css";

/**
 * ChartStyleModal 组件 - 用于自定义图表样式的可拖拽模态框
 * @param {Object} props
 * @param {boolean} props.visible - 控制模态框的显示/隐藏
 * @param {Function} props.onClose - 关闭模态框的回调函数
 * @param {Function} props.onStyleChange - 样式变更时的回调函数
 * @param {Object} props.initialStyle - 初始样式配置
 * @param {Object} props.dataRanges - 数据范围配置，包含 xMin, xMax, yMin, yMax
 */
const ChartStyleModal = ({
  visible,
  onClose,
  onStyleChange,
  initialStyle = {},
  dataRanges = { xMin: 0, xMax: 10, yMin: -2, yMax: 2 },
}) => {
  // 状态管理
  const [position, setPosition] = useState({ x: 100, y: 100 }); // 模态框位置
  const [isDragging, setIsDragging] = useState(false); // 是否正在拖拽
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); // 拖拽偏移量
  const [activeTab, setActiveTab] = useState("display"); // 当前激活的标签页
  const modalRef = useRef(null); // 模态框DOM引用
  const [error, setError] = useState(""); // 错误信息
  const [activeAxis, setActiveAxis] = useState("x"); // 新增：当前选择的轴
  const [activeGridAxis, setActiveGridAxis] = useState("x"); // 网格tab的轴选择
  const [activeAxisLineAxis, setActiveAxisLineAxis] = useState("bottom"); // 轴线和刻度线tab的轴选择
  const [axisLineSync, setAxisLineSync] = useState(false); // 左右轴同步
  const [activeAxisTitle, setActiveAxisTitle] = useState("bottom"); // 新增：当前选择的轴标题
  const [activeAxisPadding, setActiveAxisPadding] = useState("left"); // 添加轴须选择状态
  const [activeAxisLabel, setActiveAxisLabel] = useState("bottom"); // 添加轴标签选择状态

  // 样式配置状态
  const [style, setStyle] = useState({
    // 显示相关配置
    showTopAxis: initialStyle.showTopAxis ?? false,
    showBottomAxis: initialStyle.showBottomAxis ?? true,
    showLeftAxis: initialStyle.showLeftAxis ?? true,
    showRightAxis: initialStyle.showRightAxis ?? false,
    
    // 图表类型配置
    chartType: initialStyle.chartType || 'line',
    
    // 系列颜色配置（为多条数据预留）
    seriesColors: initialStyle.seriesColors || [
      '#5470c6', // 系列1
      '#91cc75', // 系列2
      '#fac858', // 系列3
      '#ee6666', // 系列4
      '#73c0de', // 系列5
      '#3ba272', // 系列6
      '#fc8452', // 系列7
      '#9a60b4', // 系列8
      '#ea7ccc'  // 系列9
    ],

    // 标题相关配置
    titleShow: initialStyle.titleShow ?? true,
    titleText: initialStyle.titleText || "标题",
    titleFontSize: initialStyle.titleFontSize || 16,
    titleColor: initialStyle.titleColor || "#333333",
    titlePosition: initialStyle.titlePosition || "center",
    titleTop: initialStyle.titleTop || "5%", // 与ScatterLineChart保持一致
    titleLeft: initialStyle.titleLeft || "center",
    titleFontFamily: initialStyle.titleFontFamily || "Microsoft YaHei",
    titleFontWeight: initialStyle.titleFontWeight || "normal",
    titleFontStyle: initialStyle.titleFontStyle || "normal",

    // 刻度相关配置 - X轴
    xScaleStart: initialStyle.xScaleStart ?? dataRanges.xMin,
    xScaleEnd: initialStyle.xScaleEnd ?? dataRanges.xMax,
    xScaleType: initialStyle.xScaleType || "value",
    xScaleAdjustment: initialStyle.xScaleAdjustment || "normal",
    xMarginAdjustment: initialStyle.xMarginAdjustment || 8,
    xIsFlipped: initialStyle.xIsFlipped ?? false,
    xMajorScaleType: initialStyle.xMajorScaleType || "byInterval",
    xMajorScaleValue:
      initialStyle.xMajorScaleValue ||
      Math.ceil((dataRanges.xMax - dataRanges.xMin) / 10),
    xMajorScaleAnchor: initialStyle.xMajorScaleAnchor || "",
    xMinorScaleType: initialStyle.xMinorScaleType || "byCount",
    xMinorScaleCount: initialStyle.xMinorScaleCount || 1,

    // 刻度相关配置 - Y轴
    yScaleStart: initialStyle.yScaleStart ?? dataRanges.yMin,
    yScaleEnd: initialStyle.yScaleEnd ?? dataRanges.yMax,
    yScaleType: initialStyle.yScaleType || "value",
    yScaleAdjustment: initialStyle.yScaleAdjustment || "normal",
    yMarginAdjustment: initialStyle.yMarginAdjustment || 8,
    yIsFlipped: initialStyle.yIsFlipped ?? false,
    yMajorScaleType: initialStyle.yMajorScaleType || "byInterval",
    yMajorScaleValue:
      initialStyle.yMajorScaleValue ||
      Math.ceil((dataRanges.yMax - dataRanges.yMin) / 10),
    yMajorScaleAnchor: initialStyle.yMajorScaleAnchor || "",
    yMinorScaleType: initialStyle.yMinorScaleType || "byCount",
    yMinorScaleCount: initialStyle.yMinorScaleCount || 1,

    // 刻度线标签相关配置
    axisLabelShow: initialStyle.axisLabelShow ?? true,
    axisLabelColor: initialStyle.axisLabelColor || "#666666",
    axisLabelFontSize: initialStyle.axisLabelFontSize || 12,

    // 网格相关配置
    gridShow: initialStyle.gridShow ?? true,
    gridColor: initialStyle.gridColor || "#e0e0e0",
    gridType: initialStyle.gridType || "solid",

    // 轴线和刻度线相关配置 - 底部轴
    bottomAxisLineShow: initialStyle.bottomAxisLineShow ?? true,
    bottomAxisLineColor: initialStyle.bottomAxisLineColor || "#333333",
    bottomAxisLineWidth: initialStyle.bottomAxisLineWidth || 1.5,
    bottomAxisLineArrow: initialStyle.bottomAxisLineArrow ?? false,
    bottomMajorTickShow: initialStyle.bottomMajorTickShow ?? true,
    bottomMajorTickLength: initialStyle.bottomMajorTickLength || 8,
    bottomMajorTickColor: initialStyle.bottomMajorTickColor || "#000000",
    bottomMajorTickWidth: initialStyle.bottomMajorTickWidth || 1,
    bottomMajorTickType: initialStyle.bottomMajorTickType || "outside",
    bottomMinorTickShow: initialStyle.bottomMinorTickShow ?? true,
    bottomMinorTickLength: initialStyle.bottomMinorTickLength || 4,
    bottomMinorTickColor: initialStyle.bottomMinorTickColor || "#000000",
    bottomMinorTickWidth: initialStyle.bottomMinorTickWidth || 1,
    bottomMinorTickType: initialStyle.bottomMinorTickType || "outside",

    // 轴线和刻度线相关配置 - 顶部轴
    topAxisLineShow: initialStyle.topAxisLineShow ?? true,
    topAxisLineColor: initialStyle.topAxisLineColor || "#333333",
    topAxisLineWidth: initialStyle.topAxisLineWidth || 1.5,
    topAxisLineArrow: initialStyle.topAxisLineArrow ?? false,
    topMajorTickShow: initialStyle.topMajorTickShow ?? true,
    topMajorTickLength: initialStyle.topMajorTickLength || 8,
    topMajorTickColor: initialStyle.topMajorTickColor || "#000000",
    topMajorTickWidth: initialStyle.topMajorTickWidth || 1,
    topMajorTickType: initialStyle.topMajorTickType || "outside",
    topMinorTickShow: initialStyle.topMinorTickShow ?? true,
    topMinorTickLength: initialStyle.topMinorTickLength || 4,
    topMinorTickColor: initialStyle.topMinorTickColor || "#000000",
    topMinorTickWidth: initialStyle.topMinorTickWidth || 1,
    topMinorTickType: initialStyle.topMinorTickType || "outside",

    // 轴线和刻度线相关配置 - 左侧轴
    leftAxisLineShow: initialStyle.leftAxisLineShow ?? true,
    leftAxisLineColor: initialStyle.leftAxisLineColor || "#333333",
    leftAxisLineWidth: initialStyle.leftAxisLineWidth || 1.5,
    leftAxisLineArrow: initialStyle.leftAxisLineArrow ?? false,
    leftMajorTickShow: initialStyle.leftMajorTickShow ?? true,
    leftMajorTickLength: initialStyle.leftMajorTickLength || 8,
    leftMajorTickColor: initialStyle.leftMajorTickColor || "#000000",
    leftMajorTickWidth: initialStyle.leftMajorTickWidth || 1,
    leftMajorTickType: initialStyle.leftMajorTickType || "outside",
    leftMinorTickShow: initialStyle.leftMinorTickShow ?? true,
    leftMinorTickLength: initialStyle.leftMinorTickLength || 4,
    leftMinorTickColor: initialStyle.leftMinorTickColor || "#000000",
    leftMinorTickWidth: initialStyle.leftMinorTickWidth || 1,
    leftMinorTickType: initialStyle.leftMinorTickType || "outside",

    // 轴线和刻度线相关配置 - 右侧轴
    rightAxisLineShow: initialStyle.rightAxisLineShow ?? true,
    rightAxisLineColor: initialStyle.rightAxisLineColor || "#333333",
    rightAxisLineWidth: initialStyle.rightAxisLineWidth || 1.5,
    rightAxisLineArrow: initialStyle.rightAxisLineArrow ?? false,
    rightMajorTickShow: initialStyle.rightMajorTickShow ?? true,
    rightMajorTickLength: initialStyle.rightMajorTickLength || 8,
    rightMajorTickColor: initialStyle.rightMajorTickColor || "#000000",
    rightMajorTickWidth: initialStyle.rightMajorTickWidth || 1,
    rightMajorTickType: initialStyle.rightMajorTickType || "outside",
    rightMinorTickShow: initialStyle.rightMinorTickShow ?? true,
    rightMinorTickLength: initialStyle.rightMinorTickLength || 4,
    rightMinorTickColor: initialStyle.rightMinorTickColor || "#000000",
    rightMinorTickWidth: initialStyle.rightMinorTickWidth || 1,
    rightMinorTickType: initialStyle.rightMinorTickType || "outside",

    // 网格相关配置 - X轴
    xGridMainShow: initialStyle.xGridMainShow ?? true,
    xGridMainColor: initialStyle.xGridMainColor || "#cccccc",
    xGridMainType: initialStyle.xGridMainType || "solid",
    xGridMainWidth: initialStyle.xGridMainWidth || 0.5,
    xGridMinorShow: initialStyle.xGridMinorShow ?? false,
    xGridMinorColor: initialStyle.xGridMinorColor || "#e0e0e0",
    xGridMinorType: initialStyle.xGridMinorType || "dashed",
    xGridMinorWidth: initialStyle.xGridMinorWidth || 0.3,

    // 网格相关配置 - Y轴
    yGridMainShow: initialStyle.yGridMainShow ?? true,
    yGridMainColor: initialStyle.yGridMainColor || "#cccccc",
    yGridMainType: initialStyle.yGridMainType || "solid",
    yGridMainWidth: initialStyle.yGridMainWidth || 0.5,
    yGridMinorShow: initialStyle.yGridMinorShow ?? false,
    yGridMinorColor: initialStyle.yGridMinorColor || "#e0e0e0",
    yGridMinorType: initialStyle.yGridMinorType || "dashed",
    yGridMinorWidth: initialStyle.yGridMinorWidth || 0.3,

    // 特殊刻度线相关配置
    splitLineShow: initialStyle.splitLineShow ?? true,
    splitLineColor: initialStyle.splitLineColor || "#e0e0e0",
    splitLineType: initialStyle.splitLineType || "solid",

    // 断点相关配置
    breakPointShow: initialStyle.breakPointShow ?? false,
    breakPointSymbol: initialStyle.breakPointSymbol || "circle",
    breakPointColor: initialStyle.breakPointColor || "#000000",

    // 轴须相关配置
    axisPaddingShow: initialStyle.axisPaddingShow ?? true,
    axisPaddingInner: initialStyle.axisPaddingInner || 20,
    axisPaddingOuter: initialStyle.axisPaddingOuter || 20,
    axisPaddingSyncAxes: initialStyle.axisPaddingSyncAxes ?? false,
    axisPaddingColor: initialStyle.axisPaddingColor || "#000000",
    axisPaddingWidth: initialStyle.axisPaddingWidth || 0.5,
    axisPaddingOpacity: initialStyle.axisPaddingOpacity || 0,
    axisPaddingSize: initialStyle.axisPaddingSize || 8,
    axisPaddingOverlap: initialStyle.axisPaddingOverlap ?? false,
    axisPaddingSpacing: initialStyle.axisPaddingSpacing || 10,
    axisPaddingMargin: initialStyle.axisPaddingMargin || 5,
    axisPaddingShowBoundary: initialStyle.axisPaddingShowBoundary ?? false,
    axisPaddingShowParallel: initialStyle.axisPaddingShowParallel ?? false,
    
    // 各轴的轴须显示控制
    topAxisPaddingShow: initialStyle.topAxisPaddingShow ?? true,
    bottomAxisPaddingShow: initialStyle.bottomAxisPaddingShow ?? true,
    leftAxisPaddingShow: initialStyle.leftAxisPaddingShow ?? true,
    rightAxisPaddingShow: initialStyle.rightAxisPaddingShow ?? true,

    // 参照线相关配置
    hReferenceLineShow: initialStyle.hReferenceLineShow ?? false,
    hReferenceLineColor: initialStyle.hReferenceLineColor || '#ff0000',
    hReferenceLineValue: initialStyle.hReferenceLineValue || 0,
    hReferenceLineWidth: initialStyle.hReferenceLineWidth || 1,
    hReferenceLineType: initialStyle.hReferenceLineType || 'solid',
    
    vReferenceLineShow: initialStyle.vReferenceLineShow ?? false,
    vReferenceLineColor: initialStyle.vReferenceLineColor || '#0000ff',
    vReferenceLineValue: initialStyle.vReferenceLineValue || 0,
    vReferenceLineWidth: initialStyle.vReferenceLineWidth || 1,
    vReferenceLineType: initialStyle.vReferenceLineType || 'solid',

    // 刻度线标签相关配置 - 底部轴
    bottomAxisLabelShow: initialStyle.bottomAxisLabelShow ?? true,
    bottomAxisLabelColor: initialStyle.bottomAxisLabelColor || "#666666",
    bottomAxisLabelFontSize: initialStyle.bottomAxisLabelFontSize || 12,
    bottomAxisLabelFontFamily: initialStyle.bottomAxisLabelFontFamily || "Microsoft YaHei",
    bottomAxisLabelRotate: initialStyle.bottomAxisLabelRotate || 0,
    bottomAxisLabelDistance: initialStyle.bottomAxisLabelDistance || 8,
    
    // 刻度线标签相关配置 - 顶部轴
    topAxisLabelShow: initialStyle.topAxisLabelShow ?? true,
    topAxisLabelColor: initialStyle.topAxisLabelColor || "#666666",
    topAxisLabelFontSize: initialStyle.topAxisLabelFontSize || 12,
    topAxisLabelFontFamily: initialStyle.topAxisLabelFontFamily || "Microsoft YaHei",
    topAxisLabelRotate: initialStyle.topAxisLabelRotate || 0,
    topAxisLabelDistance: initialStyle.topAxisLabelDistance || 8,
    
    // 刻度线标签相关配置 - 左侧轴
    leftAxisLabelShow: initialStyle.leftAxisLabelShow ?? true,
    leftAxisLabelColor: initialStyle.leftAxisLabelColor || "#666666",
    leftAxisLabelFontSize: initialStyle.leftAxisLabelFontSize || 12,
    leftAxisLabelFontFamily: initialStyle.leftAxisLabelFontFamily || "Microsoft YaHei",
    leftAxisLabelRotate: initialStyle.leftAxisLabelRotate || 0,
    leftAxisLabelDistance: initialStyle.leftAxisLabelDistance || 8,
    
    // 刻度线标签相关配置 - 右侧轴
    rightAxisLabelShow: initialStyle.rightAxisLabelShow ?? true,
    rightAxisLabelColor: initialStyle.rightAxisLabelColor || "#666666",
    rightAxisLabelFontSize: initialStyle.rightAxisLabelFontSize || 12,
    rightAxisLabelFontFamily: initialStyle.rightAxisLabelFontFamily || "Microsoft YaHei",
    rightAxisLabelRotate: initialStyle.rightAxisLabelRotate || 0,
    rightAxisLabelDistance: initialStyle.rightAxisLabelDistance || 8,
  });

  // 当模态框显示时重置位置
  useEffect(() => {
    if (visible) {
      setPosition({ x: 100, y: 100 });
    }
  }, [visible]);

  /**
   * 处理鼠标按下事件 - 开始拖拽
   * @param {MouseEvent} e - 鼠标事件对象
   */
  const handleMouseDown = (e) => {
    if (e.target.classList.contains("modal-header")) {
      setIsDragging(true);
      const rect = modalRef.current.getBoundingClientRect();
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      });
    }
  };

  /**
   * 处理鼠标移动事件 - 更新模态框位置
   * @param {MouseEvent} e - 鼠标事件对象
   */
  const handleMouseMove = (e) => {
    if (isDragging) {
      const newX = e.clientX - dragOffset.x;
      const newY = e.clientY - dragOffset.y;
      setPosition({ x: newX, y: newY });
    }
  };

  // 处理鼠标松开事件 - 结束拖拽
  const handleMouseUp = () => {
    setIsDragging(false);
  };

  // 添加和移除拖拽相关的事件监听器
  useEffect(() => {
    if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    }
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging]);

  /**
   * 处理样式变更
   * @param {string} key - 样式属性名
   * @param {any} value - 样式属性值
   */
  const handleStyleChange = (key, value) => {
    // 检查坐标轴显示设置
    if (key.startsWith("show") && key.endsWith("Axis")) {
      // 确保至少有一个坐标轴显示
      if (!value) {
        const otherAxesVisible = Object.entries(style)
          .filter(
            ([k, v]) => k.startsWith("show") && k.endsWith("Axis") && k !== key
          )
          .some(([_, v]) => v);

        if (!otherAxesVisible) {
          setError("至少需要显示一个坐标轴");
          return;
        }
      }
      setError(""); // 清除错误信息
    }

    const newStyle = { ...style, [key]: value };
    setStyle(newStyle);
    onStyleChange(newStyle);
  };

  // 获取当前选中轴的数据范围
  const getCurrentAxisRange = () => {
    return activeAxis === "x"
      ? { min: dataRanges.xMin, max: dataRanges.xMax }
      : { min: dataRanges.yMin, max: dataRanges.yMax };
  };

  // 获取当前轴的属性前缀
  const getAxisPrefix = () => activeAxis;

  // 获取网格轴的属性前缀
  const getGridAxisPrefix = () => activeGridAxis;

  // 获取轴线和刻度线tab的轴选择
  const getAxisLinePrefix = () => activeAxisLineAxis;

  // 定义标签页配置
  const tabs = [
    { key: "display", label: "显示" },
    { key: "scale", label: "刻度" },
    { key: "axisLabel", label: "刻度线标签" },
    { key: "axisTitle", label: "轴标题" },
    { key: "title", label: "标题" },
    { key: "grid", label: "网格" },
    { key: "axisLine", label: "轴线和刻度线" },
    // { key: "specialScale", label: "特殊刻度线" },
    { key: "referenceLine", label: "参照线" },
    // { key: "breakPoint", label: "断点" },
    // { key: "axisPadding", label: "轴须" },
  ];

  // 如果模态框不可见，返回null
  if (!visible) return null;

  // 确保在组件渲染前，所有需要的状态都已经初始化
  useEffect(() => {
    if (visible) {
      // 重置位置
      setPosition({ x: 100, y: 100 });
      
      // 确保激活的标签页是有效的
      if (!tabs.some(tab => tab.key === activeTab)) {
        setActiveTab("display");
      }
      
      // 确保其他状态也是有效的
      setActiveAxis("x");
      setActiveGridAxis("x");
      setActiveAxisLineAxis("bottom");
      setActiveAxisTitle("bottom");
    }
  }, [visible]);

  const renderTabContent = () => {
    try {
      switch (activeTab) {
        case "display":
          return (
            <div className="setting-group">
              {error && (
                <div
                  className="error-message"
                  style={{
                    color: "#ff4d4f",
                    marginBottom: "12px",
                    padding: "8px",
                    backgroundColor: "#fff2f0",
                    border: "1px solid #ffccc7",
                    borderRadius: "4px",
                  }}
                >
                  {error}
                </div>
              )}
              <div className="style-item">
                <label>图表类型:</label>
                <select
                  value={style.chartType}
                  onChange={(e) =>
                    handleStyleChange("chartType", e.target.value)
                  }
                >
                  <option value="line">折线图</option>
                  <option value="bar">柱状图</option>
                  <option value="scatter">散点图</option>
                  <option value="area">面积图</option>
                  <option value="pie">饼图</option>
                  <option value="funnel">漏斗图</option>
                  <option value="gauge">仪表盘</option>
                </select>
              </div>
              <div className="style-item">
                <label>系列颜色配置:</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginTop: '8px' }}>
                  {style.seriesColors.map((color, index) => (
                    <div key={index} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                      <input
                        type="color"
                        value={color}
                        onChange={(e) => {
                          const newColors = [...style.seriesColors];
                          newColors[index] = e.target.value;
                          handleStyleChange("seriesColors", newColors);
                        }}
                        style={{ 
                          width: '32px', 
                          height: '32px', 
                          padding: '2px', 
                          border: '1px solid #ddd', 
                          borderRadius: '4px',
                          cursor: 'pointer'
                        }}
                        title={`系列${index + 1}颜色`}
                      />
                      <span style={{ fontSize: '10px', color: '#666', fontWeight: 'bold' }}>
                        #{index + 1}
                      </span>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
                  当前使用系列#1颜色，支持最多9个数据系列
                </div>
              </div>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.showTopAxis}
                      onChange={(e) =>
                        handleStyleChange("showTopAxis", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示上轴
                </label>
              </div>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.showBottomAxis}
                      onChange={(e) =>
                        handleStyleChange("showBottomAxis", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示下轴
                </label>
              </div>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.showLeftAxis}
                      onChange={(e) =>
                        handleStyleChange("showLeftAxis", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示左轴
                </label>
              </div>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.showRightAxis}
                      onChange={(e) =>
                        handleStyleChange("showRightAxis", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示右轴
                </label>
              </div>
            </div>
          );

        case "title":
          return (
            <div className="setting-group">
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.titleShow}
                      onChange={(e) =>
                        handleStyleChange("titleShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示
                </label>
              </div>

              <div className="style-item">
                <label>文本</label>
                <input
                  type="text"
                  value={style.titleText}
                  onChange={(e) =>
                    handleStyleChange("titleText", e.target.value)
                  }
                  placeholder="输入标题文本"
                />
              </div>

              <div className="style-item">
                <label>字体:</label>
                <select
                  value={style.titleFontFamily}
                  onChange={(e) =>
                    handleStyleChange("titleFontFamily", e.target.value)
                  }
                >
                  <option value="SimSun">宋体 (SimSun)</option>
                  <option value="SimHei">黑体 (SimHei)</option>
                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
                  <option value="Microsoft JhengHei">微软正黑体 (Microsoft JhengHei)</option>
                  <option value="PingFang SC">苹方 (PingFang SC)</option>
                  <option value="Source Han Sans">思源黑体 (Source Han Sans)</option>
                  <option value="Arial">Arial</option>
                  <option value="Helvetica">Helvetica</option>
                  <option value="Times New Roman">Times New Roman</option>
                  <option value="Courier New">Courier New</option>
                  <option value="Verdana">Verdana</option>
                  <option value="Tahoma">Tahoma</option>
                  <option value="serif">Serif</option>
                  <option value="sans-serif">Sans-serif</option>
                  <option value="monospace">Monospace</option>
                </select>
              </div>

              <div className="style-item">
                <label>字体样式:</label>
                <select
                  value={style.titleFontStyle}
                  onChange={(e) =>
                    handleStyleChange("titleFontStyle", e.target.value)
                  }
                >
                  <option value="normal">正常</option>
                  <option value="italic">斜体</option>
                </select>
              </div>

              <div className="style-item">
                <label>字体粗细:</label>
                <select
                  value={style.titleFontWeight}
                  onChange={(e) =>
                    handleStyleChange("titleFontWeight", e.target.value)
                  }
                >
                  <option value="normal">正常</option>
                  <option value="bold">粗体</option>
                  <option value="bolder">特粗</option>
                  <option value="lighter">细体</option>
                </select>
              </div>

              <div className="style-item">
                <label>字体大小:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.titleFontSize}
                    onChange={(e) =>
                      handleStyleChange("titleFontSize", parseInt(e.target.value))
                    }
                    min="12"
                    max="48"
                  />
                  <span>px</span>
                </div>
              </div>

              <div className="style-item">
                <label>标题颜色:</label>
                <input
                  type="color"
                  value={style.titleColor}
                  onChange={(e) => handleStyleChange("titleColor", e.target.value)}
                />
              </div>

              <div className="style-item">
                <label>标题位置:</label>
                <select
                  value={style.titlePosition}
                  onChange={(e) => {
                    const position = e.target.value;
                    let updates = { titlePosition: position };

                    // 根据选择的位置预设对应的 top 和 left 值
                    switch (position) {
                      case "center":
                        updates = {
                          ...updates,
                          titleLeft: "center",
                          titleTop: "1%",
                        };
                        break;
                      case "left":
                        updates = {
                          ...updates,
                          titleLeft: "left",
                          titleTop: "1%",
                        };
                        break;
                      case "right":
                        updates = {
                          ...updates,
                          titleLeft: "right",
                          titleTop: "1%",
                        };
                        break;
                      default:
                        break;
                    }

                    const newStyle = { ...style, ...updates };
                    setStyle(newStyle);
                    onStyleChange(newStyle);
                  }}
                >
                  <option value="center">居中</option>
                  <option value="left">左对齐</option>
                  <option value="right">右对齐</option>
                </select>
              </div>
              
              <div className="style-item">
                <label>标题上边距:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.titleTop ? parseInt(style.titleTop) : 1}
                    onChange={(e) =>
                      handleStyleChange("titleTop", `${e.target.value}%`)
                    }
                    min="0"
                    max="20"
                  />
                  <span>%</span>
                </div>
              </div>
            </div>
          );

        case "scale":
          return (
            <div className="setting-group">
              <h4 className="setting-group-title">刻度设置</h4>

              {/* 轴选择 */}
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeAxis === "x" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxis("x")}
                  >
                    X轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxis === "y" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxis("y")}
                  >
                    Y轴
                  </button>
                </div>
              </div>

              {/* 基础刻度设置 */}
              <div className="style-item">
                <label>
                  起始值 (当前数据范围: {getCurrentAxisRange().min} 至 {" "}
                  {getCurrentAxisRange().max})
                </label>
                <input
                  type="number"
                  value={style[`${getAxisPrefix()}ScaleStart`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}ScaleStart`,
                      Number(e.target.value)
                    )
                  }
                />
              </div>

              <div className="style-item">
                <label>结束值</label>
                <input
                  type="number"
                  value={style[`${getAxisPrefix()}ScaleEnd`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}ScaleEnd`,
                      Number(e.target.value)
                    )
                  }
                />
              </div>

              <div className="style-item">
                <label>类型</label>
                <select
                  value={style[`${getAxisPrefix()}ScaleType`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}ScaleType`,
                      e.target.value
                    )
                  }
                >
                  <option value="value">线性 (Linear)</option>
                  <option value="log10">对数 (Log10)</option>
                  <option value="ln">对数 (Ln)</option>
                  <option value="log2">对数 (Log2)</option>
                  <option value="probability">概率 (Probability)</option>
                  <option value="probit">Probit</option>
                  <option value="logit">Logit</option>
                  <option value="gompertz">Gompertz</option>
                  <option value="weibull">Weibull</option>
                  <option value="reciprocal">反比例 (Reciprocal)</option>
                  <option value="percent">百分比 (Percent)</option>
                  <option value="date">日期 (Date)</option>
                  <option value="time">时间 (Time)</option>
                  <option value="datetime">日期时间 (DateTime)</option>
                  <option value="category">类别 (Category)</option>
                </select>
              </div>

              <div className="style-item">
                <label>调整刻度</label>
                <select
                  value={style[`${getAxisPrefix()}ScaleAdjustment`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}ScaleAdjustment`,
                      e.target.value
                    )
                  }
                >
                  <option value="normal">常规</option>
                  <option value="nice">优化</option>
                </select>
              </div>

              <div className="style-item">
                <label>重新调整页边距 (%)</label>
                <input
                  type="number"
                  value={style[`${getAxisPrefix()}MarginAdjustment`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MarginAdjustment`,
                      Number(e.target.value)
                    )
                  }
                />
              </div>

              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style[`${getAxisPrefix()}IsFlipped`]}
                      onChange={(e) =>
                        handleStyleChange(
                          `${getAxisPrefix()}IsFlipped`,
                          e.target.checked
                        )
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  翻转
                </label>
              </div>

              {/* 主刻度设置 */}
              <h4 className="setting-group-title">主刻度</h4>
              <div className="style-item">
                <label>类型</label>
                <select
                  value={style[`${getAxisPrefix()}MajorScaleType`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MajorScaleType`,
                      e.target.value
                    )
                  }
                >
                  <option value="byInterval">按增量</option>
                  <option value="byCount">按数量</option>
                </select>
              </div>

              <div className="style-item">
                <label>值</label>
                <input
                  type="number"
                  value={style[`${getAxisPrefix()}MajorScaleValue`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MajorScaleValue`,
                      Number(e.target.value)
                    )
                  }
                />
              </div>

              <div className="style-item">
                <label>锚点刻度</label>
                <input
                  type="text"
                  value={style[`${getAxisPrefix()}MajorScaleAnchor`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MajorScaleAnchor`,
                      e.target.value
                    )
                  }
                  placeholder="可选"
                />
              </div>

              {/* 次刻度设置 */}
              <h4 className="setting-group-title">次刻度</h4>
              <div className="style-item">
                <label>类型</label>
                <select
                  value={style[`${getAxisPrefix()}MinorScaleType`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MinorScaleType`,
                      e.target.value
                    )
                  }
                >
                  <option value="byCount">按数量</option>
                </select>
              </div>

              <div className="style-item">
                <label>计数</label>
                <input
                  type="number"
                  value={style[`${getAxisPrefix()}MinorScaleCount`]}
                  onChange={(e) =>
                    handleStyleChange(
                      `${getAxisPrefix()}MinorScaleCount`,
                      Number(e.target.value)
                    )
                  }
                />
              </div>
            </div>
          );

        case "axisLabel":
          return (
            <div className="setting-group">
              {/* 轴选择 */}
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeAxisLabel === "top" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLabel("top")}
                  >
                    上轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLabel === "bottom" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLabel("bottom")}
                  >
                    下轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLabel === "left" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLabel("left")}
                  >
                    左轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLabel === "right" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLabel("right")}
                  >
                    右轴
                  </button>
                </div>
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style[`${activeAxisLabel}AxisLabelShow`]}
                      onChange={(e) =>
                        handleStyleChange(`${activeAxisLabel}AxisLabelShow`, e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示刻度标签
                </label>
              </div>
              
              <div className="style-item">
                <label>标签颜色:</label>
                <input
                  type="color"
                  value={style[`${activeAxisLabel}AxisLabelColor`]}
                  onChange={(e) =>
                    handleStyleChange(`${activeAxisLabel}AxisLabelColor`, e.target.value)
                  }
                />
              </div>
              
              <div className="style-item">
                <label>字体:</label>
                <select
                  value={style[`${activeAxisLabel}AxisLabelFontFamily`]}
                  onChange={(e) =>
                    handleStyleChange(`${activeAxisLabel}AxisLabelFontFamily`, e.target.value)
                  }
                >
                  <option value="SimSun">宋体 (SimSun)</option>
                  <option value="SimHei">黑体 (SimHei)</option>
                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
                  <option value="Microsoft JhengHei">微软正黑体 (Microsoft JhengHei)</option>
                  <option value="PingFang SC">苹方 (PingFang SC)</option>
                  <option value="Source Han Sans">思源黑体 (Source Han Sans)</option>
                  <option value="Arial">Arial</option>
                  <option value="Helvetica">Helvetica</option>
                  <option value="Times New Roman">Times New Roman</option>
                  <option value="Courier New">Courier New</option>
                  <option value="Verdana">Verdana</option>
                  <option value="Tahoma">Tahoma</option>
                  <option value="serif">Serif</option>
                  <option value="sans-serif">Sans-serif</option>
                  <option value="monospace">Monospace</option>
                </select>
              </div>
              
              <div className="style-item">
                <label>字体大小:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style[`${activeAxisLabel}AxisLabelFontSize`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${activeAxisLabel}AxisLabelFontSize`,
                        parseInt(e.target.value)
                      )
                    }
                    min="8"
                    max="24"
                  />
                  <span>px</span>
                </div>
              </div>
              
              <div className="style-item">
                <label>旋转角度:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style[`${activeAxisLabel}AxisLabelRotate`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${activeAxisLabel}AxisLabelRotate`,
                        parseInt(e.target.value)
                      )
                    }
                    min="-90"
                    max="90"
                    step="5"
                  />
                  <span>°</span>
                </div>
              </div>
              
              <div className="style-item">
                <label>标签距离:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style[`${activeAxisLabel}AxisLabelDistance`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${activeAxisLabel}AxisLabelDistance`,
                        parseInt(e.target.value)
                      )
                    }
                    min="0"
                    max="50"
                  />
                  <span>px</span>
                </div>
              </div>
            </div>
          );

        case "axisTitle":
          // 轴标题配置
          const axisTitlePrefix = activeAxisTitle;
          
          return (
            <div className="setting-group">
              {/* 轴选择 */}
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeAxisTitle === "top" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisTitle("top")}
                  >
                    上轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisTitle === "bottom" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisTitle("bottom")}
                  >
                    下轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisTitle === "left" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisTitle("left")}
                  >
                    左轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisTitle === "right" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisTitle("right")}
                  >
                    右轴
                  </button>
                </div>
              </div>
              <div className="style-item">
                <label>
                  <input
                    type="checkbox"
                    checked={style[`${axisTitlePrefix}AxisTitleShow`] ?? false}
                    onChange={(e) =>
                      handleStyleChange(
                        `${axisTitlePrefix}AxisTitleShow`,
                        e.target.checked
                      )
                    }
                  />
                  显示
                </label>
              </div>
              <div className="style-item">
                <label>文本</label>
                <input
                  type="text"
                  value={style[`${axisTitlePrefix}AxisTitleText`] || ""}
                  onChange={(e) =>
                    handleStyleChange(
                      `${axisTitlePrefix}AxisTitleText`,
                      e.target.value
                    )
                  }
                  placeholder="输入轴标题"
                />
              </div>
              <div className="style-item">
                <label>字体</label>
                <select
                  value={style[`${axisTitlePrefix}AxisTitleFontFamily`] || "SimSun"}
                  onChange={(e) =>
                    handleStyleChange(
                      `${axisTitlePrefix}AxisTitleFontFamily`,
                      e.target.value
                    )
                  }
                >
                  <option value="SimSun">宋体 (SimSun)</option>
                  <option value="SimHei">黑体 (SimHei)</option>
                  <option value="Microsoft YaHei">微软雅黑 (Microsoft YaHei)</option>
                  <option value="Arial">Arial</option>
                  <option value="Helvetica">Helvetica</option>
                  <option value="Times New Roman">Times New Roman</option>
                </select>
              </div>
              <div className="style-item">
                <label>字体大小</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style[`${axisTitlePrefix}AxisTitleFontSize`] || 16}
                    onChange={(e) =>
                      handleStyleChange(
                        `${axisTitlePrefix}AxisTitleFontSize`,
                        parseInt(e.target.value)
                      )
                    }
                    min="12"
                    max="36"
                  />
                  <span>px</span>
                </div>
              </div>
              <div className="style-item">
                <label>颜色</label>
                <input
                  type="color"
                  value={style[`${axisTitlePrefix}AxisTitleColor`] || "#000000"}
                  onChange={(e) =>
                    handleStyleChange(
                      `${axisTitlePrefix}AxisTitleColor`,
                      e.target.value
                    )
                  }
                />
              </div>
              <div className="style-item">
                <label>位置</label>
                <select
                  value={style[`${axisTitlePrefix}AxisTitlePosition`] || "middle"}
                  onChange={(e) =>
                    handleStyleChange(
                      `${axisTitlePrefix}AxisTitlePosition`,
                      e.target.value
                    )
                  }
                >
                  <option value="start">起始</option>
                  <option value="middle">中间</option>
                  <option value="end">结束</option>
                </select>
              </div>
              <div className="style-item">
                <label>旋转角度</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style[`${axisTitlePrefix}AxisTitleRotate`] || 0}
                    onChange={(e) =>
                      handleStyleChange(
                        `${axisTitlePrefix}AxisTitleRotate`,
                        parseInt(e.target.value)
                      )
                    }
                    min="-180"
                    max="180"
                  />
                  <span>°</span>
                </div>
              </div>
            </div>
          );

        case "grid":
          return (
            <div className="setting-group">
              <h4 className="setting-group-title">网格线设置</h4>
              {/* 轴选择 */}
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeGridAxis === "x" ? "active" : ""
                    }`}
                    onClick={() => setActiveGridAxis("x")}
                  >
                    X轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeGridAxis === "y" ? "active" : ""
                    }`}
                    onClick={() => setActiveGridAxis("y")}
                  >
                    Y轴
                  </button>
                </div>
              </div>
              {/* 主网格线 */}
              <div
                style={{
                  borderBottom: "1px solid #eee",
                  marginBottom: 8,
                  paddingBottom: 8,
                }}
              >
                <label>
                  <b>主网格线</b>
                </label>
                <div className="style-item">
                  <label>显示</label>
                  <input
                    type="checkbox"
                    checked={style[`${getGridAxisPrefix()}GridMainShow`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMainShow`,
                        e.target.checked
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>颜色</label>
                  <input
                    type="color"
                    value={
                      style[`${getGridAxisPrefix()}GridMainColor`] || "#cccccc"
                    }
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMainColor`,
                        e.target.value
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>样式</label>
                  <select
                    value={style[`${getGridAxisPrefix()}GridMainType`] || "solid"}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMainType`,
                        e.target.value
                      )
                    }
                  >
                    <option value="solid">实线</option>
                    <option value="dashed">虚线</option>
                    <option value="dotted">点线</option>
                  </select>
                </div>
                <div className="style-item">
                  <label>粗细</label>
                  <input
                    type="number"
                    min="0.1"
                    step="0.1"
                    value={style[`${getGridAxisPrefix()}GridMainWidth`] || 0.5}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMainWidth`,
                        Number(e.target.value)
                      )
                    }
                  />
                </div>
              </div>
              {/* 次网格线 */}
              <div
                style={{
                  borderBottom: "1px solid #eee",
                  marginBottom: 8,
                  paddingBottom: 8,
                }}
              >
                <label>
                  <b>次网格线</b>
                </label>
                <div className="style-item">
                  <label>显示</label>
                  <input
                    type="checkbox"
                    checked={style[`${getGridAxisPrefix()}GridMinorShow`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMinorShow`,
                        e.target.checked
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>颜色</label>
                  <input
                    type="color"
                    value={
                      style[`${getGridAxisPrefix()}GridMinorColor`] || "#e0e0e0"
                    }
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMinorColor`,
                        e.target.value
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>样式</label>
                  <select
                    value={
                      style[`${getGridAxisPrefix()}GridMinorType`] || "dashed"
                    }
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMinorType`,
                        e.target.value
                      )
                    }
                  >
                    <option value="solid">实线</option>
                    <option value="dashed">虚线</option>
                    <option value="dotted">点线</option>
                  </select>
                </div>
                <div className="style-item">
                  <label>粗细</label>
                  <input
                    type="number"
                    min="0.1"
                    step="0.1"
                    value={style[`${getGridAxisPrefix()}GridMinorWidth`] || 0.3}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridMinorWidth`,
                        Number(e.target.value)
                      )
                    }
                  />
                </div>
              </div>
              {/* 附加线 */}
              <div>
                <label>
                  <b>附加线</b>
                </label>
                <div className="style-item">
                  <label>对面</label>
                  <input
                    type="checkbox"
                    checked={style[`${getGridAxisPrefix()}GridExtraOpposite`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridExtraOpposite`,
                        e.target.checked
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>
                    <input
                      type="checkbox"
                      checked={style[`${getGridAxisPrefix()}GridExtraEnable`]}
                      onChange={(e) =>
                        handleStyleChange(
                          `${getGridAxisPrefix()}GridExtraEnable`,
                          e.target.checked
                        )
                      }
                    />
                    {activeGridAxis.toUpperCase()} =
                  </label>
                  <input
                    type="number"
                    value={style[`${getGridAxisPrefix()}GridExtraValue`] || 0}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getGridAxisPrefix()}GridExtraValue`,
                        Number(e.target.value)
                      )
                    }
                    style={{ marginLeft: 8, width: 80 }}
                    disabled={!style[`${getGridAxisPrefix()}GridExtraEnable`]}
                  />
                </div>
              </div>
            </div>
          );

        case "axisLine":
          return (
            <div className="setting-group">
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeAxisLineAxis === "top" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLineAxis("top")}
                  >
                    上轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLineAxis === "bottom" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLineAxis("bottom")}
                  >
                    下轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLineAxis === "left" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLineAxis("left")}
                  >
                    左轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisLineAxis === "right" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisLineAxis("right")}
                  >
                    右轴
                  </button>
                </div>
              </div>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={axisLineSync}
                      onChange={(e) => setAxisLineSync(e.target.checked)}
                    />
                    <span className="slider"></span>
                  </div>
                  同步设置所有轴
                </label>
              </div>

              <div
                style={{
                  borderBottom: "1px solid #eee",
                  marginBottom: 8,
                  paddingBottom: 8,
                }}
              >
                <label>
                  <b>线条</b>
                </label>
                <div className="style-item">
                  <label>显示</label>
                  <input
                    type="checkbox"
                    checked={style[`${getAxisLinePrefix()}AxisLineShow`]}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getAxisLinePrefix()}AxisLineShow`,
                        e.target.checked
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>颜色</label>
                  <input
                    type="color"
                    value={
                      style[`${getAxisLinePrefix()}AxisLineColor`] || "#000000"
                    }
                    onChange={(e) =>
                      handleStyleChange(
                        `${getAxisLinePrefix()}AxisLineColor`,
                        e.target.value
                      )
                    }
                  />
                </div>
                <div className="style-item">
                  <label>粗细</label>
                  <input
                    type="number"
                    min="0.1"
                    step="0.1"
                    value={style[`${getAxisLinePrefix()}AxisLineWidth`] || 1.5}
                    onChange={(e) =>
                      handleStyleChange(
                        `${getAxisLinePrefix()}AxisLineWidth`,
                        Number(e.target.value)
                      )
                    }
                  />
                </div>
              </div>
            </div>
          );

        case "specialScale":
          return (
            <div className="setting-group">
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.splitLineShow}
                      onChange={(e) =>
                        handleStyleChange("splitLineShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示分隔线
                </label>
              </div>
              <div className="style-item">
                <label>分隔线颜色:</label>
                <input
                  type="color"
                  value={style.splitLineColor}
                  onChange={(e) =>
                    handleStyleChange("splitLineColor", e.target.value)
                  }
                />
              </div>
              <div className="style-item">
                <label>分隔线类型:</label>
                <select
                  value={style.splitLineType}
                  onChange={(e) =>
                    handleStyleChange("splitLineType", e.target.value)
                  }
                >
                  <option value="solid">实线</option>
                  <option value="dashed">虚线</option>
                  <option value="dotted">点线</option>
                </select>
              </div>
            </div>
          );

        case "referenceLine":
          return (
            <div className="setting-group">
              {/* 水平参照线 */}
              <h4 className="setting-group-title">水平参照线</h4>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.hReferenceLineShow}
                      onChange={(e) =>
                        handleStyleChange("hReferenceLineShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示水平参照线
                </label>
              </div>
              <div className="style-item">
                <label>颜色:</label>
                <input
                  type="color"
                  value={style.hReferenceLineColor}
                  onChange={(e) =>
                    handleStyleChange("hReferenceLineColor", e.target.value)
                  }
                />
              </div>
              <div className="style-item">
                <label>Y轴值:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.hReferenceLineValue}
                    onChange={(e) =>
                      handleStyleChange(
                        "hReferenceLineValue",
                        parseFloat(e.target.value)
                      )
                    }
                    step="0.1"
                  />
                </div>
              </div>
              <div className="style-item">
                <label>线宽:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.hReferenceLineWidth}
                    onChange={(e) =>
                      handleStyleChange(
                        "hReferenceLineWidth",
                        parseFloat(e.target.value)
                      )
                    }
                    min="0.5"
                    max="5"
                    step="0.5"
                  />
                </div>
              </div>
              <div className="style-item">
                <label>线型:</label>
                <select
                  value={style.hReferenceLineType}
                  onChange={(e) =>
                    handleStyleChange("hReferenceLineType", e.target.value)
                  }
                >
                  <option value="solid">实线</option>
                  <option value="dashed">虚线</option>
                  <option value="dotted">点线</option>
                </select>
              </div>

              {/* 垂直参照线 */}
              <h4 className="setting-group-title">垂直参照线</h4>
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.vReferenceLineShow}
                      onChange={(e) =>
                        handleStyleChange("vReferenceLineShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示垂直参照线
                </label>
              </div>
              <div className="style-item">
                <label>颜色:</label>
                <input
                  type="color"
                  value={style.vReferenceLineColor}
                  onChange={(e) =>
                    handleStyleChange("vReferenceLineColor", e.target.value)
                  }
                />
              </div>
              <div className="style-item">
                <label>X轴值:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.vReferenceLineValue}
                    onChange={(e) =>
                      handleStyleChange(
                        "vReferenceLineValue",
                        parseFloat(e.target.value)
                      )
                    }
                    step="0.1"
                  />
                </div>
              </div>
              <div className="style-item">
                <label>线宽:</label>
                <div className="input-group">
                  <input
                    type="number"
                    value={style.vReferenceLineWidth}
                    onChange={(e) =>
                      handleStyleChange(
                        "vReferenceLineWidth",
                        parseFloat(e.target.value)
                      )
                    }
                    min="0.5"
                    max="5"
                    step="0.5"
                  />
                </div>
              </div>
              <div className="style-item">
                <label>线型:</label>
                <select
                  value={style.vReferenceLineType}
                  onChange={(e) =>
                    handleStyleChange("vReferenceLineType", e.target.value)
                  }
                >
                  <option value="solid">实线</option>
                  <option value="dashed">虚线</option>
                  <option value="dotted">点线</option>
                </select>
              </div>
            </div>
          );

        case "breakPoint":
          return (
            <div className="setting-group">
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.breakPointShow}
                      onChange={(e) =>
                        handleStyleChange("breakPointShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示断点
                </label>
              </div>
              <div className="style-item">
                <label>断点符号:</label>
                <select
                  value={style.breakPointSymbol}
                  onChange={(e) =>
                    handleStyleChange("breakPointSymbol", e.target.value)
                  }
                >
                  <option value="circle">圆形</option>
                  <option value="rect">方形</option>
                  <option value="triangle">三角形</option>
                  <option value="diamond">菱形</option>
                </select>
              </div>
              <div className="style-item">
                <label>断点颜色:</label>
                <input
                  type="color"
                  value={style.breakPointColor}
                  onChange={(e) =>
                    handleStyleChange("breakPointColor", e.target.value)
                  }
                />
              </div>
            </div>
          );

        case "axisPadding":
          return (
            <div className="setting-group">
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.axisPaddingShow}
                      onChange={(e) =>
                        handleStyleChange("axisPaddingShow", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示
                </label>
              </div>
              
              <div className="style-item">
                <label>选择坐标轴</label>
                <div className="axis-selector">
                  <button
                    className={`axis-button ${
                      activeAxisPadding === "top" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisPadding("top")}
                  >
                    上轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisPadding === "bottom" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisPadding("bottom")}
                  >
                    下轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisPadding === "left" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisPadding("left")}
                  >
                    左轴
                  </button>
                  <button
                    className={`axis-button ${
                      activeAxisPadding === "right" ? "active" : ""
                    }`}
                    onClick={() => setActiveAxisPadding("right")}
                  >
                    右轴
                  </button>
                </div>
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style[`${activeAxisPadding}AxisPaddingShow`]}
                      onChange={(e) =>
                        handleStyleChange(`${activeAxisPadding}AxisPaddingShow`, e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  {`启用${
                    activeAxisPadding === "top" ? "上" :
                    activeAxisPadding === "bottom" ? "下" :
                    activeAxisPadding === "left" ? "左" : "右"
                  }轴轴须`}
                </label>
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.axisPaddingSyncAxes}
                      onChange={(e) =>
                        handleStyleChange("axisPaddingSyncAxes", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  对所有轴使用相同的选项
                </label>
              </div>
              
              <div className="style-item">
                <label>数据:</label>
                <select
                  value="all"
                  onChange={(e) => {
                    // 这里可以添加数据选择的逻辑
                  }}
                >
                  <option value="all">&lt;All&gt;</option>
                </select>
              </div>
              
              <div className="style-item">
                <label>颜色:</label>
                <input
                  type="color"
                  value={style.axisPaddingColor || "#000000"}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingColor", e.target.value)
                  }
                />
              </div>
              
              <div className="style-item">
                <label>粗细:</label>
                <select
                  value={style.axisPaddingWidth || 0.5}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingWidth", parseFloat(e.target.value))
                  }
                >
                  <option value="0.5">0.5</option>
                  <option value="1">1.0</option>
                  <option value="1.5">1.5</option>
                  <option value="2">2.0</option>
                </select>
              </div>
              
              <div className="style-item">
                <label>透明度(%):</label>
                <input
                  type="number"
                  value={style.axisPaddingOpacity || 0}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingOpacity", parseInt(e.target.value))
                  }
                  min="0"
                  max="100"
                />
              </div>
              
              <div className="style-item">
                <label>大小(%):</label>
                <input
                  type="number"
                  value={style.axisPaddingSize || 8}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingSize", parseInt(e.target.value))
                  }
                  min="1"
                  max="50"
                />
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.axisPaddingOverlap}
                      onChange={(e) =>
                        handleStyleChange("axisPaddingOverlap", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  重叠
                </label>
              </div>
              
              <div className="style-item">
                <label>轴须间隔(%):</label>
                <input
                  type="number"
                  value={style.axisPaddingSpacing || 10}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingSpacing", parseInt(e.target.value))
                  }
                  min="0"
                  max="100"
                />
              </div>
              
              <div className="style-item">
                <label>页边距(%):</label>
                <input
                  type="number"
                  value={style.axisPaddingMargin || 5}
                  onChange={(e) =>
                    handleStyleChange("axisPaddingMargin", parseInt(e.target.value))
                  }
                  min="0"
                  max="50"
                />
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.axisPaddingShowBoundary}
                      onChange={(e) =>
                        handleStyleChange("axisPaddingShowBoundary", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示径向边界
                </label>
              </div>
              
              <div className="style-item">
                <label>
                  <div className="switch">
                    <input
                      type="checkbox"
                      checked={style.axisPaddingShowParallel}
                      onChange={(e) =>
                        handleStyleChange("axisPaddingShowParallel", e.target.checked)
                      }
                    />
                    <span className="slider"></span>
                  </div>
                  显示平行边界
                </label>
              </div>
            </div>
          );

        default:
          return null;
      }
    } catch (error) {
      console.error("Error rendering tab content:", error);
      return <div className="error-message">加载内容时出错，请尝试切换标签页</div>;
    }
  };

  return (
    <div
      className="modal-overlay"
      onClick={(e) => {
        if (e.target.classList.contains("modal-overlay")) {
          onClose();
        }
      }}
    >
      <div
        ref={modalRef}
        className="modal-content"
        style={{
          left: `${position.x}px`,
          top: `${position.y}px`,
          cursor: isDragging ? "grabbing" : "default",
        }}
      >
        <div
          className="modal-header"
          onMouseDown={handleMouseDown}
          style={{ cursor: isDragging ? "grabbing" : "grab" }}
        >
          <h3>自定义图表样式</h3>
          <button className="close-button" onClick={onClose}>
            ×
          </button>
        </div>
        <div className="tabs">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              className={`tab ${activeTab === tab.key ? "active" : ""}`}
              onClick={() => {
                // 修复可能导致 DOM 错误的部分
                try {
                  setActiveTab(tab.key);
                } catch (error) {
                  console.error("Error switching tabs:", error);
                }
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>
        <div className="tab-content">{renderTabContent()}</div>
      </div>
    </div>
  );
};

export default ChartStyleModal;
